import type { FC } from 'react';
import { useMemoizedFn } from 'ahooks';
import Feather from '@expo/vector-icons/Feather';
import { View, Text, TouchableOpacity } from 'react-native';
import { Avatar, Modal, message } from '@/components';
import styles from './styles';
import type { User } from '@/typings/user';

type UserProps = {
  user: User.UserInfo;
}

const UserItem: FC<UserProps> = (props) => {
  const { user } = props;

  const handleRemove = useMemoizedFn(() => {
    Modal.confirm({
      danger: true,
      okText: 'Remove',
      title: 'Are you sure you want to remove this user?',
      onOk: async () => {
        message.success('Removed successfully.');
        return true;
      }
    })
    return true;
  });

  const onPressMore = useMemoizedFn(() => {
    Modal.sheet({
      buttons: [
        {
          main: true,
          key: 'remove',
          title: 'Remove',
          type: 'danger',
          onPress: handleRemove
        },
        {
          key: 'report',
          title: 'Report',
          onPress: handleRemove
        },
      ]
    })
  });

  return (
    <View style={styles.user}>
      <Avatar url={user.avatar} />
      <View style={styles.userContent}>
        <Text style={styles.userName}>{user.nickName}</Text>
        <Text style={styles.createAt}>2min ago</Text>
      </View>
      <TouchableOpacity
        onPressIn={onPressMore}
      >
        <Feather
          size={20}
          color="#666"
          name="more-horizontal"
        />
      </TouchableOpacity>
    </View>
  );
}

export default UserItem;